﻿<template>
  <div class="wrapper">
    <!-- 面包屑导航栏区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <template>
    <el-table :data="employeeData" style="width: 100%" :header-cell-style="{background:'rgb(55,61,65)',color:'#fff','text-align':'center'}" :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="empName" label="姓名"> </el-table-column>
      <el-table-column prop="empSex" label="性别"> </el-table-column>
      <el-table-column prop="empAge" label="年龄"> </el-table-column>
      <el-table-column prop="empPhonenumber" label="电话"> </el-table-column>
      <el-table-column prop="empAddress" label="住址"> </el-table-column>
      <el-table-column prop="empPosition" label="职位"> </el-table-column>
      <el-table-column label="操作" width="150px">
            <template v-slot="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.userId)"></el-button>
            </template>
          </el-table-column>
      
    </el-table>
  </template>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      employeeData:[],
      
    };
  },
  watch: {},

  computed: {},
  methods: {
    async getEmployee(){
      const{data:res} = await this.$http.get('myblog/employee/list')
      if(res.code !==200){
        return this.$message.error(res.msg)
        
      }
      this.employeeData = res.data.filter(item =>{
        return item.empStatus===1
      })
      console.log(res.data);
      this.$message.success("数据请求成功")
    },
    async removeById(id){
      console.log(id);
      // this.employeeData.splice(id,1)
      // this.$message.success('删除成功')
      const{data:res} = await this.$http.post(`myblog/employee/removeById`+'?id'+id)
       if(res.code !==200){
        return this.$messge.error('数据请求失败')
      }
      this.$message.success("数据请求成功")
    }
  },
  created() {
    this.getEmployee()

  },
  mounted() {}
};
</script>
<style lang="less" scoped>

</style>